<template>
  <div class="home">
   <van-cell-group class="my-info">
      <van-cell class="base-info" center :border="false">
        <van-image
         class="avatar"
         slot="icon"
         round
         fit="cover"
         :src="require('./../assets/logo.png')"
        />
        <div class="name" slot="title">{{data.username}}</div>
        <div class="name" slot="title">手机号：{{data.phone}}</div>
      </van-cell>
    </van-cell-group>
    <van-cell class="mb-5" title="修改密码" is-link to="/pwd"/>
    <van-cell class="logout-cell" title="退出登录"/>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
//   name: 'home',
  data(){
    return{
      data:[]
    }
  },
  methods:{
    async getAccountById(){
      const {data:res}= await this.$axios({url:this.$location.getAccountById});
      // console.log(res)
      this.data=res.data
    }
  },
  created(){
    this.getAccountById();
  }
}
</script>

<style lang="scss" scoped>
  .my-info{
    background: url("./../assets/bgd.jpg") no-repeat;
    .base-info{
      box-sizing: border-box;
      height: 250px;
      background-color: unset;
    }
    .avatar{
      box-sizing: border-box;
      width: 66px;
      height: 66px;
      border:1px solid #fff;
      margin-right: 11px;
    }
    .name{
      font-size: 15px;
      color: #fff;
    }
  }
  .largeTitle{
    display: flex;
    .title{
      display: flex;
      flex-direction: column;
      flex:1;
      align-items: center;
      color: #fff;
      font-size: 14px;
      margin-bottom: 20px;
      span{
        margin: 5px;
      }
    }
  }
  .mb-4{
    margin-bottom: 4px;
    color: coral;
  }
  .mb-5{
    color: rgb(157,154,173);
    margin-bottom: 4px;
    margin-top: 50px;
  }
  .logout-cell{
    .van-cell__title{
      color: coral;
      text-align: center;
    }
  }
</style>
